<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 给父盒子添加透视效果 */
        section {
            perspective: 1000px;
            width: 450px;
            height: 300px;
            border: 1px solid #000;
            margin: 0 auto;
            background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592221119323&di=cfe538d96c42d8889117ec180bcd7879&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F13%2F20180813205240_kdfsn.jpg) no-repeat;
            background-size: 450px 300px;
            margin-top: 300px;
            position: relative;
        }

        .door_l,
        .door_r {
            position: absolute;
            width: 50%;
            height: 100%;
            background-color: pink;
            transition: all 0.5s;
        }

        .door_l {
            left: 0;
            border-right: 1px solid black;
        }

        .door_l::before,
        .door_r::before {
            content: "";
            position: absolute;
            right: 5px;
            top: 50%;
            transform: translateY(-50%);
            width: 10px;
            height: 10px;
            border: 1px solid black;
            border-radius: 50%;

        }

        .door_r::before {
            left: 5px;
        }

        .door_r {
            right: 0;
            border-left: 1px solid black;
        }

        section:hover .door_l {
            transform-origin: left;
            transform: rotateY(-120deg);
        }

        section:hover .door_r {
            transform-origin: right;
            transform: rotateY(120deg);
        }
    </style>
</head>

<body>
    <section>
        <div class="door_l"></div>
        <div class="door_r"></div>
    </section>
</body>

</html>